<script type="text/javascript">
$(document).ready(function() {
 $('#calendar').fullCalendar({ 
         draggable: true, 
         events: "<?= site_url('user/attendance/get_attendance_details');?>", 
         eventDrop: function(event, delta) { 
            alert(event.title + ' was moved ' + delta + ' days\n' + 
               '(should probably update your database)'); 
         }, 
         loading: function(bool) { 
            if (bool) $('#loading').show(); 
            else $('#loading').hide(); 
         } 
      }); 
});
</script>
<div class="row-fluid">
<div class="span8">
<div id="calendar"></div>
</div>
<div class="span4">
<header>Salary Status</header>
<table width="100%">
<tr>
<td width="40%">My Salary</td>
<td width="60%">: Rs. 0</td>
</tr>
<tr>
<td>Deducted Salary</td>
<td>: Rs. 0</td>
</tr>
<tr>
<td>Payable Salary</td>
<td>: Rs. 0</td>
</tr>
</table>
<br />
<br />

<header>Leave Status</header>
<table width="100%">
  <tr>
    <td width="40%">Paid Leave Available</td>
    <td width="60%">: 1</td>
  </tr>
  <tr>
    <td>Leave Taken</td>
    <td>: 2</td>
  </tr>
  <tr>
    <td>Absent</td>
    <td>: 4</td>
  </tr>
</table>

</div>
</div>